<template>
<div class="nodeContent">
    <div class="info">
        <div class="title" style="text-align:left">
            <span>{{nodeDetailTitle}}</span>
            <i class="el-icon-close" @click="closeBox('showFlowInfo')"></i>
        </div>
        <div class="content">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="流程信息" name="first">
                    <node-info v-if="showCom" :nodeData="nodeData"></node-info>
                    <node-info-edit v-else :nodeData="nodeEditData"></node-info-edit>
                </el-tab-pane>
                <el-tab-pane label="节点信息" name="second">
                    <flow-info v-if="showCom" :flowData="flowData"></flow-info>
                    <flow-edit v-else :flowData="flowEditData"></flow-edit>
                </el-tab-pane>
                <el-tab-pane label="子流程信息" name="third">
                    <children-flow v-if="showCom" :childrenFlowData="childrenFlowData"></children-flow>
                    <children-flow-edit v-else :cflowData="cflowData"></children-flow-edit>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</div>
</template>
<script>
    import flowEdit from './components/edit/flow-info.vue'
    import childrenFlowEdit from './components/edit/children-flow-info.vue'
    import nodeInfoEdit from './components/edit/node-info.vue'
    import flowInfo from './components/see/flow-info.vue'
    import childrenFlow from './components/see/children-flow-info.vue'
    import nodeInfo from './components/see/node-info.vue'
    export default {
        name: "nodeContent",
        props:{
            nodeDetailTitle:{
                type:String,
                default:'title'
            },
            showCom:{
                type:Boolean,
                default:false
            }
        },
        components: {
            flowEdit,
            childrenFlowEdit,
            nodeInfoEdit,
            flowInfo,
            childrenFlow,
            nodeInfo
        },
        data(){
            return {
                activeName:'first',
                flowData:[],
                flowEditData:[],
                nodeData:[],
                nodeEditData:[],
                childrenFlowData:[],
                cflowData:[]
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log("选项卡切换");
            },
            closeBox(name){
                this.$parent.closeDialog(name)

            }

        }
    }
</script>
<style>

</style>
